<template>
  <div class="patrol-inspection">
    <div class="all-my-task">
      <tab-header :tabList="tabList" @clickTab="clickTab"></tab-header>
    </div>
    <div class="table-content">
      <all-task  v-if="tabValue === '1'"></all-task>
      <my-task  v-if="tabValue === '2'"></my-task>
    </div>
  </div>
</template>

<script setup lang=ts>
import tabHeader from "@/views/viewComponent/tabHeader.vue";
import { tabData } from "@/views/viewComponent/tabHeader.vue";
import { ref, reactive } from "vue";

import allTask from "./allTask.vue";
import myTask from "./myTask.vue";

let tabList: Array<tabData> = reactive([
  {
    name: "全部任务",
    value: "1",
  },
  {
    name: "我的任务",
    value: "2",
  },
]);

let tabValue = ref("1");

const clickTab = (data: tabData) => {
  tabValue.value = data.value;
};
</script>
<style lang='less'>
.patrol-inspection {
  height: 100%;
  .all-my-task {
    height: 68px;

    background: #f9fcff;
    padding-left: 8px;
    border-radius: 5px;
  }
  .table-content {
    margin-top: 10px;
    height: calc(100% - 100px);
    padding: 5px;
  }
}
</style>